Ext.layout.container.Card.prototype.setActiveItem = function(newCard, animateDirection) {
    var me = this,
        owner = me.owner,
        oldCard = me.activeItem,
        rendered = owner.rendered,
        newIndex;

    newCard = me.parseActiveItem(newCard);
    newIndex = owner.items.indexOf(newCard);
    
    // If the card is not a child of the owner, then add it.
    // Without doing a layout!
    if (newIndex == -1) {
        newIndex = owner.items.items.length;
        Ext.suspendLayouts();
        newCard = owner.add(newCard);
        Ext.resumeLayouts();
    }
    
    // Is this a valid, different card?
    if (newCard && oldCard != newCard) {
        // Fire the beforeactivate and beforedeactivate events on the cards
        if (newCard.fireEvent('beforeactivate', newCard, oldCard) === false) {
            return false;
        }
        if (oldCard && oldCard.fireEvent('beforedeactivate', oldCard, newCard) === false) {
            return false;
        }
    
        if (rendered) {
            Ext.suspendLayouts();
    
            // If the card has not been rendered yet, now is the time to do so.
            if (!newCard.rendered) {
                me.renderItem(newCard, me.getRenderTarget(), owner.items.length);
            }
    
            if (oldCard) {
                if (me.hideInactive) {
                    if (animateDirection) {
                        var left = 0;
                        if (animateDirection == "left") {  
                            left = -(Ext.getBody().getWidth());  
                        }
                        else if (animateDirection == "right") {  
                            left = Ext.getBody().getWidth();  
                        }
                        oldCard.getEl().setLeft(left);
                        console.log(left);
                        oldCard.getEl().animate({
                            from:{
                                left:0
                            },
                            to:{
                                left:left
                            },
                            duration:250,
                            listeners:{
                                afteranimate:function(){
                                    oldCard.hide();
                                }
                            }
                        });
                    }
                    
                    else {
                        oldCard.hide();
                    }
                  
                    oldCard.hiddenByLayout = true;
                }
                oldCard.fireEvent('deactivate', oldCard, newCard);
            }
            // Make sure the new card is shown
            if (newCard.hidden) {
                var left = 0;
                if (animateDirection) {
                    if (animateDirection == "left") {  
                        left = Ext.getBody().getWidth();  
                    }
                    else if (animateDirection == "right") { 
                        left = -(Ext.getBody().getWidth()); 
                    }
                    
                    newCard.getEl().setLeft(left);
                }
                
                newCard.show();
            }
            
            if(animateDirection) {
                newCard.getEl().animate({
                    to: {
                        left:0
                    },
                    duration:100
                });
            }
    
            // Layout needs activeItem to be correct, so set it if the show has not been vetoed
            if (!newCard.hidden) {
                me.activeItem = newCard;
            }
            Ext.resumeLayouts(true);
        } else {
            me.activeItem = newCard;
        }
    
        newCard.fireEvent('activate', newCard, oldCard);
    
        return me.activeItem;
    }
    return false;
    
    
    
    Ext.layout.container.Card.prototype.setActiveItem = function(newCard, animateDirection) {
        var me = this,
            owner = me.owner,
            oldCard = me.activeItem,
            newIndex;

        newCard = me.parseActiveItem(newCard);
        newIndex = owner.items.indexOf(newCard);

        // If the card is not a child of the owner, then add it
        if (newIndex == -1) {
            newIndex = owner.items.items.length;
            owner.add(newCard);
        }

        // Is this a valid, different card?
        if (newCard && oldCard != newCard) {
            // If the card has not been rendered yet, now is the time to do so.
            if (!newCard.rendered) {
                me.renderItem(newCard, me.getRenderTarget(), owner.items.length);
                me.configureItem(newCard, 0);
            }

            me.activeItem = newCard;

            // Fire the beforeactivate and beforedeactivate events on the cards
            if (newCard.fireEvent('beforeactivate', newCard, oldCard) === false) {
                return false;
            }
            if (oldCard && oldCard.fireEvent('beforedeactivate', oldCard, newCard) === false) {
                return false;
            }

            // If the card hasnt been sized yet, do it now
            if (me.sizeAllCards) {
                // onLayout calls setItemBox
                me.onLayout();
            }
            else {
                me.setItemBox(newCard, me.getTargetBox());
            }

            me.owner.suspendLayout = true;

            if (oldCard) {
                if (me.hideInactive) {
                    var left = 0;
                    if(false){
                        console.log("");
                        if(animateDirection == "left") {  left = -(Ext.getBody().getWidth());  }
                        else if(animateDirection == "right") {  left = Ext.getBody().getWidth();  }
                        oldCard.getEl().setLeft(left);
                        console.log(left);
                        oldCard.getEl().animate({
                            from:{
                                left:0
                            },
                            to:{
                                left:left
                            },
                            duration:250,
                            listeners:{
                                afteranimate:function(){
                                    oldCard.hide();
                                }
                            }
                        });
                        
                        
                    } else {
                        oldCard.hide();
                    }
                }
                oldCard.fireEvent('deactivate', oldCard, newCard);
            }

            // Make sure the new card is shown
            me.owner.suspendLayout = false;
            if (newCard.hidden) {
                var left = 0;
                if(animateDirection){
                    if(animateDirection == "left") {  left = Ext.getBody().getWidth();  }
                    else if(animateDirection == "right") {  left = -(Ext.getBody().getWidth());  }
                    newCard.getEl().setLeft(left);
                }
                newCard.show();
            } else {
                me.onLayout();
            }
            if(animateDirection){
                newCard.getEl().animate({
                    to:{
                        left:0
                    },
                    duration:100
                });
            }


            newCard.fireEvent('activate', newCard, oldCard);

            return newCard;
        }
        return false;
    }
}